import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  Dimensions,
  TouchableOpacity,
  ActivityIndicator,
  TextInput,
  Button,
  Clipboard,
} from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import {connect} from 'react-redux';
import {getWallet, createWallet} from '../../api/index';
const {width} = Dimensions.get('window');
import {setToastMsg} from '../../actions/index';

class ChargeAddress extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      walletIsCreated: false,
      imgUrl: this.props.navigation.getParam('portraitkey'),
    };
  }
  async createWallet() {
    let result = await createWallet();
    this.setState({
      walletIsCreated: true,
      address: result.data,
    });
  }
  async getWallet() {
    let result = await getWallet();
    if (result.error_code === 0 || result.error_code === '0') {
      this.setState({
        walletIsCreated: true,
        address: result.data,
      });
    }
  }
  componentWillMount(): void {
    this.getWallet();
  }
  _addClipboard(text) {
    Clipboard.setString(text);
    this.props.setToastMsg('复制成功！');
  }
  render() {
    if (!this.state.walletIsCreated) {
      return (
        <View style={{marginTop: 50, width: width - 100, marginLeft: 50}}>
          <Text style={{textAlign: 'center', marginBottom: 30}}>
            您还没有创建充值钱包，请创建！
          </Text>
          <Button
            title={'创建钱包'}
            onPress={() => {
              this.createWallet();
            }}
          />
        </View>
      );
    }
    return (
      <View>
        <View
          style={{
            width: width,
            height: 120,
            backgroundColor: '#2AA0F2',
          }}
        />
        <View
          style={{
            width: 80,
            height: 80,
            borderRadius: 40,
            marginLeft: width / 2 - 40,
            backgroundColor: '#EEEEEE',
            marginTop: -40,
          }}>
          <Image
            source={{uri: this.props.img}}
            style={{width: 80, height: 80, borderRadius: 40}}
          />
        </View>
        <Text style={{textAlign: 'center', marginTop: 20}}>
          {this.state.address}
        </Text>
        <View
          style={{
            width: width - 100,
            height: width - 100,
            marginLeft: 50,
            marginTop: 20,
            backgroundColor: '#EFF1F2',
          }}>
          <QRCode
            value={this.state.address}
            size={width - 100}
            bgColor="purple"
            fgColor="white"
          />
        </View>
        <View style={{width: width - 100, marginLeft: 50, marginTop: 30}}>
          <Button
            title={'复制充值地址'}
            onPress={() => {
              this._addClipboard(this.state.address);
            }}
          />
        </View>
        <View style={{flexDirection: 'row', marginTop: 20, marginLeft: 50}}>
          <Text style={{fontSize: 12}}>这是达尔文星球为您准备的</Text>
          <Text style={{color: '#2AA0F2', fontSize: 12}}>专属区块链地址</Text>
        </View>
        <View style={{flexDirection: 'row', marginTop: 5, marginLeft: 50}}>
          <Text style={{fontSize: 12}}>可供您在</Text>
          <Text style={{color: '#2AA0F2', fontSize: 12}}>其他虚拟货币</Text>
          <Text style={{fontSize: 12}}>充值DNA</Text>
        </View>
        <TouchableOpacity style={{marginLeft: 100, marginTop: 50}}>
          <Text style={{fontSize: 12, color: '#2AA0F2'}}>
            还不懂区块链？不要紧，来看看这 >>
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}
export default connect(
  state => ({
    img: state.home.img,
  }),
  dispatch => ({
    setToastMsg: text => dispatch(setToastMsg(text)),
  }),
)(ChargeAddress);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },

  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    margin: 10,
    borderRadius: 5,
    padding: 5,
  },
});
